<template>
    <div class="m-25 mt-65">
        <div class="normal-box-mod">
            <div class="normal-box-hd clearfix">
                <div class="normal-box-title">
                    <div class="decorate-square"></div>
                    <h2>系统默认商品</h2>
                </div>
            </div>
            <div class="normal-box-bd">
                <div class="normal-list-page-mod">
                    <div class="clearfix mb-20">
                        <Row>
                            <Button custom-icon="iconfont icon-fangkuai2"
                                    type="primary"
                                    size="small"
                                    style="float:right"
                                    @click="showCreateModal">添加商品</Button>
                            <Col span="2">
                            <Select @on-change="changeLevelCopy1"
                                    v-model="modal.spu.formData.level1"
                                    placeholder="请选择品类"
                                    clearable
                                    label-in-value
                                    style="width: 100px">
                                <Option v-for="items in level1List"
                                        :key="items.id"
                                        :value="items.id"
                                        :label="items.name"></Option>
                            </Select>
                            </Col>
                            <Col span="2"
                                 v-if="modal.spu.show.showLevel2">
                            <Select v-model="modal.spu.formData.level2"
                                    placeholder="请选择品类"
                                    clearable
                                    label-in-value
                                    style="width: 100px"
                                    @on-change="changeLevelCopy2">
                                <Option v-for="o in level2List"
                                        :value="o.id"
                                        :key="o.id"
                                        :label="o.name"></Option>
                            </Select>
                            </Col>
                            <Col span="2"
                                 v-if="modal.spu.show.showLevel3">
                            <Select @on-change="changeLevelCopy3"
                                    v-model="modal.spu.formData.level3"
                                    placeholder="请选择品类"
                                    label-in-value
                                    clearable
                                    style="width: 100px">
                                <Option v-for="o in level3List"
                                        :value="o.id"
                                        :key="o.id"
                                        :label="o.name"></Option>
                            </Select>
                            </Col>
                            <Col span="4">
                            <Input class="mr-10"
                                   v-model="queryData.goodsName"
                                   placeholder="商品名称"
                                   style="width: 230px" />

                            </Col>
                            <Col span="3">
                            <Select placeholder="请选择商品状态"
                                    class="mr-10"
                                    v-model="queryData.status"
                                    style="width:150px"
                                    :clearable=true>
                                <Option v-for="item in modal.spu.status"
                                        :value="item.value"
                                        :key="item.value">{{ item.label }}
                                </Option>
                            </Select>
                            </Col>
                            <Button type="primary"
                                    custom-icon="iconfont icon-chaxun"
                                    size="small"
                                    @click="getTableData">查找</Button>
                        </Row>
                    </div>
                    <div class="normal-list-page-bd">
                        <Table border
                               :loading="list.loading"
                               :columns="list.columns"
                               :data="list.tableData"
                               @on-selection-change="selectionChange">
                        </Table>
                    </div>
                    <div class="normal-list-page-ft clearfix">
                        <Page class="fr"
                              :total="queryData.totalRecord"
                              :page-size="queryData.pageSize"
                              :current="queryData.page"
                              @on-change="changePage"
                              @on-page-size-change="onPageSizeChange"
                              show-elevator
                              show-total
                              show-sizer></Page>
                    </div>
                </div>
            </div>
            <Modal v-model="modal.spu.isShow"
                   :loading="modal.spu.loading"
                   :mask-closable="false"
                   :title="modal.spu.title"
                   @on-ok="postData">

                <Form ref="systemFrom"
                      :model="modal.spu.formData"
                      :rules="modal.spu.rules"
                      :label-width="120">                 
                    <FormItem label="标准商品名称"
                              prop="name">
                        <Input v-model="modal.spu.formData.name"
                               style="width: 300px" />
                    </FormItem>
                    <FormItem label="标题">
                        <Input v-model="modal.spu.formData.title"
                               style="width: 300px" />
                    </FormItem>

                    <FormItem label="图片"
                              prop="uploadList2">
                        <upload-image ref="upload2"
                                      :uploadList.sync="modal.spu.formData.uploadList2"
                                      @imageupload="calcImg"></upload-image>
                    </FormItem>
                    
                    <FormItem label="品类"
                              v-if="modal.spu.type=='create'"
                              prop="categoryId">
                        <Row>
                            <Col span="8">
                            <Select @on-change="changeLevel1"
                                    v-model="modal.spu.formData.level1"
                                    placeholder="请选择"
                                    clearable
                                    label-in-value
                                    style="width: 100px">
                                <Option v-for="items in level1List"
                                        :key="items.id"
                                        :value="items.id"
                                        :label="items.name"></Option>
                            </Select>
                            </Col>
                            <Col span="8">
                            <Select v-model="modal.spu.formData.level2"
                                    placeholder="请选择"
                                    clearable
                                    label-in-value
                                    style="width: 100px"
                                    @on-change="changeLevel2">
                                <Option v-for="o in level2List"
                                        :value="o.id"
                                        :key="o.id"
                                        :label="o.name"></Option>
                            </Select>
                            </Col>
                            <Col span="8">
                            <Select @on-change="changeLevel3"
                                    v-model="modal.spu.formData.level3"
                                    placeholder="请选择"
                                    label-in-value
                                    clearable
                                    style="width: 100px">
                                <Option v-for="o in level3List"
                                        :value="o.id"
                                        :key="o.id"
                                        :label="o.name"></Option>
                            </Select>
                            </Col>
                        </Row>
                    </FormItem>
                    
                    <FormItem label="品牌"
                              prop="brandId"
                              v-if="showBrand">
                        <Select v-model="modal.spu.formData.brandId"
                                @on-change=changeBrand
                                label-in-value
                                style="width:300px">
                            <Option v-for="(ad,index) in brandList"
                                    :key="ad.id"
                                    :value="ad.id"
                                    :label="ad.nameZh"></Option>
                        </Select>
                    </FormItem>
                    
                    <FormItem label="商品介绍">
                        <Input v-model="modal.spu.formData.introduce"
                               style="width: 300px" />
                    </FormItem>
                    
                    <FormItem label="描述">
                        <Input v-model="modal.spu.formData.description"
                               type="textarea"
                               style="width: 300px" />
                    </FormItem>
                    <FormItem label="是否上架"
                              prop="onShelves">
                        <i-switch size="large"
                                  @on-change="change"
                                  v-model="modal.spu.formData.onShelves"
                                  :value="modal.spu.formData.onShelves">
                            <span slot="open">上架</span>
                            <span slot="close">下架</span>
                        </i-switch>
                    </FormItem>
                    
                    <FormItem label="热门商品"
                              prop="isHot">
                        <i-switch size="large"
                                  @on-change="change"
                                  v-model="modal.spu.formData.isHot"
                                  :value="modal.spu.formData.isHot">
                            <span slot="open">是</span>
                            <span slot="close">否</span>
                        </i-switch>
                    </FormItem>
                </Form>
            </Modal>
            <!-- 规格组列表 -->
            <Modal fullscreen
                   v-model="modal.group.isShow"
                   :loading="modal.group.loading"
                   :mask-closable="false"
                   :title="modal.group.title"
                   footer-hide>
                <div class="mb-20">
                    <Button-group>
                        <Button custom-icon="iconfont icon-fangkuai2"
                                size="small"
                                type="primary"
                                @click="showCreateGroup">
                            新建规格组
                        </Button>
                    </Button-group>
                </div>
                <Table border
                       :loading="groupList.loading"
                       :columns="groupList.columns"
                       :data="groupList.tableData"
                       @on-selection-change="selectionChange"></Table>
                <div class="normal-list-page-ft clearfix">
                    <Page class="fr"
                          :total="queryGroup.totalRecord"
                          :page-size="queryGroup.pageSize"
                          :current="queryGroup.page"
                          @on-change="changePage"
                          @on-page-size-change="onPageSizeChange"
                          show-elevator
                          show-total
                          show-sizer></Page>
                </div>
            </Modal>
            <!-- 新建&修改规格组 -->
            <Modal v-model="modal.addGroup.isShow"
                   :loading="modal.addGroup.loading"
                   :mask-closable="false"
                   :title="modal.addGroup.title"
                   @on-ok="postGroup">
                <Form ref="systemFrom"
                      :model="modal.addGroup.formData"
                      :rules="modal.addGroup.rules"
                      :label-width="120">
                    <FormItem label="规格组名称"
                              prop="name">
                        <Input placeholder="请输入规格组名称"
                               v-model="modal.addGroup.formData.name"
                               style="width:300px;" />
                    </FormItem>
                    <!-- <FormItem label="属性"
                              prop="isPublic">
                        <i-switch size="large"
                                  @on-change="change"
                                  v-model="modal.addGroup.formData.isPublic"
                                  :value="modal.addGroup.formData.isPublic">
                            <span slot="open">公共</span>
                            <span slot="close">私有</span>
                        </i-switch>
                    </FormItem> -->
                    <FormItem label="锁定"
                              prop="isLock">
                        <i-switch size="large"
                                  @on-change="change"
                                  v-model="modal.addGroup.formData.isLock"
                                  :value="modal.addGroup.formData.isLock">
                            <span slot="open">是</span>
                            <span slot="close">否</span>
                        </i-switch>

                    </FormItem>
                </Form>
            </Modal>
            <!-- 新建&修改规格属性 -->
            <Modal v-model="modal.addSpec.isShow"
                   :loading="modal.addSpec.loading"
                   :mask-closable="false"
                   :title="modal.addSpec.title"
                   @on-ok="postSpec">
                <Form ref="systemFrom"
                      :model="modal.addSpec.formData"
                      :rules="modal.addSpec.rules"
                      :label-width="120">
                    <FormItem label="规格组id"
                              prop="groupId">
                        <Input disabled
                               v-model="modal.addSpec.formData.groupId"
                               style="width:300px;" />
                    </FormItem>
                    <FormItem label="规格属性名称"
                              prop="name">
                        <Input placeholder="请输入规格属性名称"
                               v-model="modal.addSpec.formData.name"
                               style="width:300px;" />
                    </FormItem>
                    <FormItem label="通用规则"
                              prop="generic">
                        <i-switch size="large"
                                  @on-change="change"
                                  v-model="modal.addSpec.formData.generic"
                                  :value="modal.addSpec.formData.generic">
                            <span slot="open">是</span>
                            <span slot="close">否</span>
                        </i-switch>
                    </FormItem>
                    <FormItem label="搜索关键词"
                              prop="search">
                        <i-switch size="large"
                                  @on-change="change"
                                  v-model="modal.addSpec.formData.search"
                                  :value="modal.addSpec.formData.search">
                            <span slot="open">是</span>
                            <span slot="close">否</span>
                        </i-switch>

                    </FormItem>
                </Form>
            </Modal>
            <!-- 分配商户弹层 -->
            <!-- <Modal v-model="assignMerchants.isShow"
                   :mask-closable="false"
                   :title="assignMerchants.title"
                   @on-ok="postSpec">
                <Form ref="systemFrom"
                      :model="assignMerchants.formData"
                      :rules="assignMerchants.rules"
                      :label-width="100">
                    <FormItem label="商户">
                        <Select v-model="model11"
                                @on-change='changeAssignMerchants'
                                filterable>
                            <Option v-for="item in cityList"
                                    :value="item.value"
                                    :key="item.value">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                </Form>
            </Modal> -->
        </div>
    </div>
</template>
<script>
import sele from '@/view/test/city.vue'
// import GroupApi from '@/api/business/group.js'
import GroupApi from '@/api/business/groupNew.js'

// import SpecApi from '@/api/business/spec.js'
import SpecApi from '@/api/business/specNew.js'

// import SpuApi from '@/api/business/spu.js'
import SpuApi from '@/api/business/spuNew.js'

// import BrandApi from '@/api/business/brand.js'
import BrandApi from '@/api/business/brandNew.js'

// import CategoryApi from '@/api/business/category.js'
import CategoryApi from '@/api/business/categoryNew.js'

import Uploadoss from '@/components/uploadoss'
import uploadImage from '@/components/upload-image/upload-image'
import { Message } from 'iview'
import spec from './submenu/defaultSpec.vue'
export default {
	components: {
		sele,
		spec,
		Uploadoss,
		uploadImage
	},
	mounted() {
		this.getTableData()
		var user = JSON.parse(Vue.localStorage.get('user'))
		var userName = user
		this.userName = userName.username
		if (this.userName == 'admin') {
		} else if (this.userName !== 'admin') {
			this.getBusinessList()
		}
	},
	data() {
		return {
			userName: '', //登录的用户名
			// 选中的商品
			chooseId: '',
			// 品牌列表
			brandList: [], // 列表
			level1List: [],
			level2List: [],
			level3List: [],
			businessList: [],
			list: {
				loading: false,
				selections: [],
				// 列表展示数据
				tableData: [],
				// 表格表头
				columns: [
					// {
					//   type: 'selection',
					//   width: 50,
					//   align: 'center'
					// },
					/** 开始自动生成 */
					{ title: 'id', key: 'id', align: 'center', width: '90px' },
					{
						title: '名称',
						key: 'name',
						align: 'center',
						width: '190px'
					},
					{
						title: '标题',
						key: 'title',
						align: 'center'
					},
					{
						title: '品类名称',
						key: 'categoryName',
						align: 'center',
						width: '170px'
					},
					{
						title: '品牌名称',
						key: 'brandName',
						align: 'center',
						width: '170px'
					},
					{
						title: '状态',
						key: 'onShelves',
						align: 'center',
						width: '120px',
						render: (create, params) => {
							let s = params.row.onShelves
							let color, text
							if (s) {
								color = '#5ed71a'
								text = '上架'
							} else {
								color = '#d72c23'
								text = '下架'
							}
							return create(
								'div',
								{
									style: {
										color: color,
										borderRadius: '20px'
									}
								},
								text
							)
						}
					},
					{
						title: '热门商品',
						key: 'isHot',
						align: 'center',
						width: '120px',
						render: (create, params) => {
							let s = params.row.isHot
							let color, text
							if (s) {
								color = '#5ed71a'
								text = '是'
							} else {
								color = '#d72c23'
								text = '否'
							}
							return create(
								'div',
								{
									style: {
										color: color,
										borderRadius: '20px'
									}
								},
								text
							)
						}
					},
					{
						title: '商品属性',
						key: 'isPublic',
						align: 'center',
						width: '130px',
						render: (create, params) => {
							let s = params.row.isPublic
							let color, text
							if (s) {
								color = '#5ed71a'
								text = '公有'
							} else {
								color = '#d72c23'
								text = '私有 '
							}
							return create(
								'div',
								{
									style: {
										color: color,
										borderRadius: '20px'
									}
								},
								text
							)
						}
					},
					{
						title: '添加时间',
						key: 'createTime',
						align: 'center',
						width: '100px'
					},
					{
						title: '修改时间',
						key: 'updateTime',
						align: 'center',
						width: '100px'
					},
					{
						// 操作
						title: '操作',
						key: 'action',
						width: 240,
						align: 'center',
						fixed: 'right',
						render: (h, params) => {
							return h('div', { class: 'action-group' }, [
								h(
									'Tooltip',
									{
										props: {
											placement: 'left',
											content: '规格组'
										},
										style: {
											cursor: 'pointer'
										}
									},
									[
										h(
											'Button',
											{
												props: {
													type: 'success',
													size: 'small'
												},
												style: {
													marginRight: '5px',
													padding: '1px 2px'
												},
												on: {
													click: () => {
														// this.showUpdateModal(params.index);
														this.showGroup(
															params.row.id
														)
													}
												}
											},
											[
												h('Icon', {
													props: {
														type: 'ios-apps',
														size: 18
													}
												})
											]
										)
									]
								),
								h(
									'Tooltip',
									{
										props: {
											placement: 'left',
											content: '编辑'
										},
										style: {
											cursor: 'pointer'
										}
									},
									[
										h(
											'Button',
											{
												props: {
													type: 'primary',
													size: 'small'
												},
												style: {
													marginRight: '5px',
													padding: '1px 2px'
												},
												on: {
													click: () => {
														this.showUpdateModal(
															params.row
														)
													}
												}
											},
											[
												h('Icon', {
													props: {
														type:
															' iconfont icon-bianjisekuai',
														size: 18
													}
												})
											]
										)
									]
								),

								h(
									'Tooltip',
									{
										props: {
											placement: 'right',
											content: '删除'
										},
										style: {
											cursor: 'pointer'
										}
									},
									[
										h(
											'Button',
											{
												props: {
													type: 'error',
													size: 'small'
												},
												style: {
													marginRight: '5px',
													padding: '1px 2px'
												},
												on: {
													click: () => {
														this.delData(
															params.row.id
														)
													}
												}
											},
											[
												h('Icon', {
													props: {
														type:
															' iconfont icon-shanchusekuai',
														size: 18
													}
												})
											]
										)
									]
								),
								 h(
								 	'Tooltip',
								 	{
								 		props: {
								 			placement: 'left',
								 			content: '分发系统商品'
								 		},
								 		style: {
								 			cursor: 'pointer'
								 		}
								 	},
								 	[
								 		h(
								 			'Button',
								 			{
								 				props: {
								 					type: 'success',
								 					size: 'small'
								 				},
								 				style: {
								 					marginRight: '5px',
								 					padding: '1px 2px'
												},
								 				on: {
								 					click: () => {
								 						this.showAssignMerchants(
								 							params.row.spuId
								 						)
								 					}
								 				}
								 			},
								 			[
								 				h('Icon', {
								 					props: {
								 						type: 'ios-settings',
								 						size: 18
								 					}
								 				})
								 			]
								 		)
								 	]
								 )
							])
						}
					}
				]
			},
			level: 1,
			// 页面查询数据
			queryData: {
				limit: 10,
				page: 1,
				totalRecord: 0
			},
			queryExport: {},
			// 商户管理员参数
			queryLog: {
				limit: 10,
				page: 1,
				totalRecord: ''
			},
			logShow: false, // 商户管理员是否显示
			logList: [], // 商户管理员列表
			logCol: [
				{ align: 'center', title: '序号', type: 'index', width: 80 },
				{
					align: 'center',
					title: '商品名称',
					key: 'goodsName'
				},
				{
					align: 'center',
					title: '商品条形码',
					key: 'goodsCode'
				},
				{
					align: 'center',
					title: '成交价格',
					key: 'originalPrice'
				},
				{
					align: 'center',
					title: '交易总额',
					key: 'totalMoney'
				}
			],
			modal: {
				spu: {
					isShow: false,
					loading: true,
					type: 'create', // create 新建，update 修改
					title: '添加标准商品',
					formData: {
						uploadList2: []
					},
					show: {
						showLevel2: false,
						showLevel3: false
					},
					status: [
						{
							value: 1,
							label: '上架'
						},
						{
							value: 2,
							label: '下架'
						}
					],
					rules: {
						// check
						name: [
							{
								type: 'string',
								required: true,
								message: '请输入商品名称',
								trigger: ['blur', 'change']
							}
						],
						uploadList2: [
							{
								type: 'array',
								required: true,
								message: '请上传图片',
								trigger: ['blur', 'change']
							}
						],
						categoryId: [
							{
								type: 'number',
								required: true,
								message: '请选择商品分类',
								trigger: 'change'
							}
						],
						brandId: [
							{
								type: 'number',
								required: true,
								message: '请选择品牌',
								trigger: 'change'
							}
						],
						onShelves: [
							{
								type: 'boolean',
								required: true,
								message: '请选择商品状态',
								trigger: 'change'
							}
						],
						isHot: [
							{
								type: 'boolean',
								required: true,
								trigger: 'change'
							}
						]
					}
				},
				group: {
					isShow: false,
					loading: true,
					title: '规格组管理'
				},
				addGroup: {
					isShow: false,
					loading: true,
					type: 'create', // create 新建，update 修改
					title: '新建规格组',
					formData: {}
				},
				spec: {
					isShow: false,
					loading: true,
					title: '规格属性管理'
				},
				addSpec: {
					isShow: false,
					loading: true,
					type: 'create', // create 新建，update 修改
					title: '新建规格属性',
					formData: {}
				}
			},
			// 规格组列表
			groupList: {
				loading: false,
				selections: [],
				// 列表展示数据
				tableData: [],
				// 表格表头
				columns: [
					/** 开始自动生成 */
					{ title: 'id', minWidth: 40, key: 'id', align: 'center' },
					{
						type: 'expand',
						width: 60,
						align: 'center',
						render: (h, params) => {
							return this.$createElement(spec, {
								ref: 'child',
								props: {
									row: params.row
								}
							})
						}
					},
					{
						title: '规格组名称',
						minWidth: 80,
						key: 'name',
						align: 'center'
					},
					// {
					// 	title: '商品id',
					// 	minWidth: 100,
					// 	key: 'spuId',
					// 	align: 'center'
					// },
					{
						title: '商品属性',
						key: 'isPublic',
						minWidth: 70,
						align: 'center',
						// width: '130px',
						render: (create, params) => {
							let s = params.row.isPublic
							let color, text
							if (s) {
								color = '#5ed71a'
								text = '公有'
							} else {
								color = '#d72c23'
								text = '私有 '
							}
							return create(
								'div',
								{
									style: {
										color: color,
										borderRadius: '20px'
									}
								},
								text
							)
						}
					},
					{
						title: '创建时间',
						align: 'center',
						key: 'createTime',
						minWidth: 100
					},
					{
						title: '更新时间',
						align: 'center',
						key: 'updateTime',
						minWidth: 100
					},
					/** 自动生成结束 */
					{
						title: '操作',
						align: 'center',
						minWidth: 150,
						render: (h, params) => {
							return h('div', { class: 'action-group' }, [
								h(
									'Tooltip',
									{
										props: {
											placement: 'left',
											content: '添加规格属性'
										},
										style: {
											cursor: 'pointer'
										}
									},
									[
										h(
											'Button',
											{
												props: {
													type: 'success',
													size: 'small'
												},
												style: {
													marginRight: '5px',
													padding: '1px 2px'
												},
												on: {
													click: () => {
														this.showCreateSpec(
															params.row
														)
													}
												}
											},
											[
												h('Icon', {
													props: {
														type: 'md-git-network',
														size: 18
													}
												})
											]
										)
									]
								),

								h(
									'Tooltip',
									{
										props: {
											placement: 'left',
											content: '编辑'
										},
										style: {
											cursor: 'pointer'
										}
									},
									[
										h(
											'Button',
											{
												props: {
													type: 'primary',
													size: 'small'
												},
												style: {
													marginRight: '5px',
													padding: '1px 2px'
												},
												on: {
													click: () => {
														// this.showUpdateModal(params.index);
														this.showUpdateGroup(
															params.row
														)
													}
												}
											},
											[
												h('Icon', {
													props: {
														type:
															' iconfont icon-bianjisekuai',
														size: 18
													}
												})
											]
										)
									]
								),

								h(
									'Tooltip',
									{
										props: {
											placement: 'right',
											content: '删除'
										},
										style: {
											cursor: 'pointer'
										}
									},
									[
										h(
											'Button',
											{
												props: {
													type: 'error',
													size: 'small'
												},
												style: {
													marginRight: '5px',
													padding: '1px 2px'
												},
												on: {
													click: () => {
														this.delGroup(
															params.row.id,
															params.row
														)
													}
												}
											},
											[
												h('Icon', {
													props: {
														type:
															' iconfont icon-shanchusekuai',
														size: 18
													}
												})
											]
										)
									]
								)
							])
						}
					}
				]
			},
			// 规格组查询
			queryGroup: {
				limit: 10,
				page: 1,
				totalRecord: 0
			},
			showBrand: false,
			// 分配商户弹层
			assignMerchants: {
				isShow: false,
				formData: {}
			},
			cityList: [
				{
					value: 'New York',
					label: 'New York'
				},
				{
					value: 'London',
					label: 'London'
				},
				{
					value: 'Sydney',
					label: 'Sydney'
				},
				{
					value: 'Ottawa',
					label: 'Ottawa'
				},
				{
					value: 'Paris',
					label: 'Paris'
				},
				{
					value: 'Canberra',
					label: 'Canberra'
				}
			],
			model11: '',
			//关键词
			isPublic: ''
		}
	},
	methods: {
		// 获取列表
		getTableData() {
			const that = this
			that.queryData.totalRecord = undefined
			SpuApi.getPageList(that.queryData)
				.then(res => {
					that.list.tableData = res.data.list
					that.queryData.totalRecord = res.data.totalRecord
					//   that.queryData.page = res.data.pageNum
					that.queryData.limit = res.data.pageSize
				})
				.catch(error => {
					Message.error(error)
				})
		},
		// 获取品牌列表
		async getBrandList(categoryId) {
			this.brandList = (
				await BrandApi.getBindList({ categoryId: categoryId })
			).data
			this.showBrand = true
		},
		// 获取商户列表
		async getBusinessList() {
			this.businessList = (await SpuApi.init()).data
		},
		// 点击规格组弹层按钮获取规格列表
		getGroupData(id) {
			const that = this
			that.queryGroup.totalRecord = undefined
			//  that.list.loading=true
			that.queryGroup.spuId = id
			that.queryGroup.isPublic = true
			GroupApi.getPageList(that.queryGroup)
				.then(res => {  
					that.groupList.tableData = res.data.list
					that.queryGroup.totalRecord = res.data.totalRecord
					that.queryGroup.page = res.data.pageNum
					that.queryGroup.limit = res.data.pageSize
					// that.queryData.totalRecord = res.data.totalRecord
					// that.queryData.page = res.data.pageNum
					// that.queryData.limit = res.data.pageSize
				})
				.catch(error => {
					Message.error(error)
				})
		},
		// 初始化第一级品类列表
		getCategory1(level, parent) {
			//   this.category1 =
			let that = this
			CategoryApi.getPageList({
				page: 1,
				limit: 100,
				level: level,
				parentId: parent
			}).then(res => {
				let data = res.data.list
				data.forEach(item => {
					item.label = item.name
					item.value = item.value
				})
				if (level == 1) {
					that.level1List = data
				} else if (level == 2) {
					that.level2List = data
				} else if (level == 3) {
					that.level3List = data
				}
			})
		},
		// 图片的校验
		calcImg() {
			this.modal.spu.formData.picture = this.modal.spu.formData.uploadList2.map(
				v => {
					if (v.length < 1) return v
					v = v.response.res.requestUrls[0]
					return v
				}
			)
			// 手动去除原图保护
			//   this.modal.sku.formData.images.forEach((v) => {
			//     if (v.response.res.requestUrls[0].indexOf('?') > -1) {
			//       v.response.res.requestUrls[0] = v.response.res.requestUrls[0].split('?')[0]
			//     }
			//   })
		},
		// 删除
		delData(ids) {
			this.$Modal.confirm({
				title: '确认删除',
				content:
					'<p>您确认删除id为 <strong>' +
					ids.toString() +
					'</strong> 的商品吗?</p><p>删除后将无法撤销，请谨慎操作！</p>',
				loading: true,
				onOk: () => {
					SpuApi.del({id:ids}).then(res => {
						this.$Modal.remove()
						if (!res.code) {
							this.$Notice.success({
								title: '删除成功'
							})
							this.queryData.page = 1
							this.getTableData()
						} else {
							this.$Notice.error({
								title: res.message
							})
						}
					})
				}
			})
		},
		// 分配商户
		changeAssignMerchants(e) {
			// console.log(e, 'e')
		},
		// 查询
		inQuire() {
			const that = this
			that.getTableData()
		},
		// 全选，不全选
		selectionChange(args) {
			this.list.selections = args
		},

		// 每页显示记录数变更
		onPageSizeChange(pageSize) {
			this.queryData.limit = pageSize
			this.getTableData()
		},

		// 换页
		changePage(page) {
			this.queryData.page = page
            console.log(this.queryData,'this.queryData')
                
			this.getTableData()
		},
		//添加商品弹层
		showCreateModal() {
			this.modal.spu.formData = {}
			this.modal.spu.title = '添加默认商品'
			this.modal.spu.type = 'create'
			this.modal.spu.isShow = true
            this.modal.spu.formData.onShelves = false
            this.modal.spu.formData.isHot = false
		},
		showUpdateModal(row) {
			let that = this
			this.modal.spu.title = '修改默认商品'
			this.modal.spu.type = 'update'
			this.modal.spu.formData = row
			this.modal.spu.formData.uploadList2 = []
			if (row.picture) {
				let imgs = row.picture.split(',')
				let t = 0
				imgs.forEach(i => {
					t++
					let item = {
						status: 'finished',
						response: {
							res: {
								requestUrls: [i]
							}
						}
					}
					that.modal.spu.formData.uploadList2.push(item)
					if (t == imgs.length) {
						that.modal.spu.isShow = true
					}
				})
			} else {
				that.modal.spu.isShow = true
			}
		},
		// 分发商户
		showAssignMerchants(ids) {
            var id = {id:ids}
            console.log(ids,'ids')
            this.$Modal.confirm({
				title: '确认分发',
				content:
					'<p>您确认分发id为 <strong>' +
					ids.toString() +
					'</strong> 的商品吗?</p><p>分发后将无法撤销，请谨慎操作！</p>',
				loading: true,
				onOk: () => {
					SpuApi.quickLoad(id).then(res => {
						this.$Modal.remove()
						if (!res.code) {
							this.$Notice.success({
								title: '分发成功'
							})
							this.queryData.page = 1
							this.getTableData()
						} else {
							this.$Notice.error({
								title: res.message
							})
						}
					})
				}
			})
		},
		// 品类选择
		changeLevel1(e) {
			if (e) {
				this.getCategory1(2, e.value)
			}
		},
		// 品类选择
		changeLevel2(e) {
			if (e) {
				this.getCategory1(3, e.value)
			}
		},
		changeLevel3(e) {
			if (e) {
				this.modal.spu.formData.categoryId = e.value
				this.modal.spu.formData.categoryName = e.label
				this.queryData.categoryId = e.value
				this.getBrandList(e.value)
			}
		},
		changeLevelCopy1(e) {
			if (e) {
				this.modal.spu.show.showLevel2 = true
				this.getCategory1(2, e.value)
			}
		},
		changeLevelCopy2(e) {
			if (e) {
				this.modal.spu.show.showLevel3 = true
				this.getCategory1(3, e.value)
			}
		},
		changeLevelCopy3(e) {
			if (e) {
				this.modal.spu.formData.categoryId = e.value
				this.modal.spu.formData.categoryName = e.label
				// this.queryData.categoryId = e.value

				this.queryData.categoryName = e.label
				this.getBrandList(e.value)
			}
		},
		changeBrand(e) {
			if (e) {
				this.modal.spu.formData.brandId = e.value
				this.modal.spu.formData.brandName = e.label
				// this.queryData.brandId = e.value
			}
		},
		// 选择商户
		changeBusiness(e) {
			if (e) {
				this.modal.spu.formData.businessId = e.value
				this.modal.spu.formData.businessName = e.label
			}
		},
		// 添加商品
		postData() {
			const that = this
            // that.$refs['systemFrom'].validate(valid => {
			that.$refs['systemFrom'].validate(valid => {
                
				if (that.modal.spu.formData.picture instanceof Array) {
					that.modal.spu.formData.picture = that.modal.spu.formData.picture.join(
						','
					)
				} else {
					let picture = this.modal.spu.formData.uploadList2.map(v => {
						if (v.length < 1) return v
						v = v.response.res.requestUrls[0]
						return v
					})
					that.modal.spu.formData.picture = picture.join(',')
				}
				if (valid) {
					// that.modal.spu.formData.isPublic = 1
					that.modal.spu.formData.isPublic = true
					if (!that.modal.spu.formData.id) {
						// 新建
                        
						SpuApi.add(that.modal.spu.formData)
							.then(res => {
								that.modal.spu.isShow = false
								that.modal.spu.loading = false
								if (!res.code) {
									that.getTableData()
									that.$Notice.success({
										title: '保存成功!'
									})
								} else {
									that.$Notice.error({
										title: res.message
									})
								}
							})
							.catch(error => {
								Message.error(error)
							})
					} else {
						// 修改
						SpuApi.update(
							that.modal.spu.formData.id,
							that.modal.spu.formData
						)
							.then(res => {
								that.modal.spu.isShow = false
								that.modal.spu.loading = false
								if (!res.code) {
									that.getTableData()
									that.$Notice.success({
										title: '保存成功!'
									})
								} else {
									that.$Notice.error({
										title: res.message
									})
								}
							})
							.catch(error => {
								Message.error(error)
							})
					}
				} else {
					that.modal.spu.loading = false
					that.$nextTick(() => {
						that.modal.spu.loading = true
					})
				}
			})
		},
		// 新建规格组
		postGroup() {
			const that = this
			that.modal.addGroup.formData.isPublic = true
			if (!that.modal.addGroup.formData.id) {
				// 新建
				GroupApi.add(that.modal.addGroup.formData)
					.then(res => {
						that.modal.addGroup.isShow = false
						that.modal.addGroup.loading = false
						if (!res.code) {
							that.getGroupData(that.chooseId)
							that.$Notice.success({
								title: '保存成功!'
							})
						} else {
							that.$Notice.error({
								title: res.message
							})
						}
					})
					.catch(error => {
						Message.error(error)
					})
			} else {
				// 修改
				GroupApi.update(
					that.modal.addGroup.formData.id,
					that.modal.addGroup.formData
				)
					.then(res => {
						that.modal.addGroup.isShow = false
						that.modal.addGroup.loading = false
						if (!res.code) {
							that.getGroupData(that.chooseId)
							that.$Notice.success({
								title: '保存成功!'
							})
						} else {
							that.$Notice.error({
								title: res.message
							})
						}
					})
					.catch(error => {
						Message.error(error)
					})
			}
		},
		// 新建规格属性
		postSpec() {
			let that = this
			that.modal.addSpec.formData.isPublic = true
			SpecApi.add(that.modal.addSpec.formData)
				.then(res => {
					that.modal.addSpec.isShow = false
					that.modal.addSpec.loading = false
					if (!res.code) {
						that.getGroupData(that.chooseId)
						that.$Notice.success({
							title: '保存成功!'
						})
					} else {
						that.$Notice.error({
							title: res.message
						})
					}
				})
				.catch(error => {
					Message.error(error)
				})
		},
		// 删除规格组
		delGroup(ids, row) {
			let that = this
			this.$Modal.confirm({
				title: '确认删除',
				content:
					'<p>您确认删除id为 <strong>' +
					ids.toString() +
					'</strong> 的规格组吗?</p><p>删除后将无法撤销，请谨慎操作！</p>',
				loading: true,
				onOk: () => {
					GroupApi.del({id:ids}).then(res => {
						this.$Modal.remove()
						if (!res.code) {
							this.$Notice.success({
								title: '删除成功'
							})
							this.queryData.page = 1
							that.getGroupData(that.chooseId)
						} else {
							this.$Notice.error({
								title: res.message
							})
						}
					})
				}
			})
		},
		showCreateGroup() {
			this.modal.addGroup.title = '新建规格组'
			this.modal.addGroup.formData.isLock = false
			this.modal.addGroup.formData.isPublic = true
			this.modal.addGroup.formData.name = ''
			this.modal.addGroup.isShow = true
		},
		showUpdateGroup(row) {
			this.modal.addGroup.type = 'update'
			this.modal.addGroup.title = '修改规格组'
			this.modal.addGroup.formData = row
			this.modal.addGroup.isShow = true
		},
		// 显示规格组弹窗
		showGroup(id) {
			this.chooseId = id
			this.getGroupData(id)
			this.modal.addGroup.formData.spuId = id
			this.modal.group.isShow = true
		},
		showCreateSpec(row) {
			this.modal.addSpec.title = '新建规格属性'
			this.modal.addSpec.formData.spuId = row.spuId
			this.modal.addSpec.formData.groupId = row.id
			this.modal.addSpec.formData.name = ''
			this.modal.addSpec.formData.search = false
			this.modal.addSpec.formData.segments = false
			this.modal.addSpec.formData.generic = true
			this.modal.addSpec.isShow = true
		}
	},

	created() {
		// this.getTableData()
		// this.getBrandList()
		// this.getBusinessList()
		this.getCategory1(1, '')
	}
}
</script>
